<template>
  <view>
    <view class="item" v-for="(item,index) in dataList" @click="itemClick(item)">
      <view class="left_container">
        <image class="modal_img" src="../../static/inspection/icon_modal.png" />
        <view class="modal_name">{{item.modelName}}</view>
      </view>
      <image class="right_img" src="../../static/inspection/right_arrow.png"></image>
    </view>

  </view>

</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
  import { queryClModelReDomainByShop, saveClModelTaskByModel } from '@/services/inspection'

  const currentOptions = ref([{ name: '任务111111', code: '' }])
  //是否展示底部弹窗
  const visible = ref(false)
  // 列表数据
  const dataList = ref([])
  // 当前页数
  const page = ref(1)
  // 总条数
  const total = ref(0)
  //当前选中的店面
  let currentStore : any = null

  const queryData = defineProps<{ data : string }>()
  //门店名称 编码 经销商编码
  let shopCode = ''
  let shopName = ''
  let dealerCode = ''
  let dealerName = ''
  onLoad(() => {
    console.log(queryData.data)
    const data = JSON.parse(queryData.data)
    shopCode = data.code
    shopName = data.name
    dealerCode = data.dealerCode
    dealerName = data.dealerName
    getData(true)
  })

  //下拉刷新
  onPullDownRefresh(() => {
    getData(true)
  })
  //上拉加载
  onReachBottom(() => {
    if (page.value > total.value) {
      uni.showToast({
        title: '已加载完全部',
        icon: 'none',
      })
      return
    }
    getData(false)
  })
  //获取列表数据
  const getData = (refresh : Boolean) => {
    if (refresh) {
      page.value = 1
    } else {
      page.value++
    }
    uni.showLoading({
      title: ''
    })
    queryClModelReDomainByShop({ shopCode, page: page.value, rows: 10 }).then((res : any) => {
      console.log(res)
      uni.hideLoading()
      if (refresh) {
        //刷新逻辑
        dataList.value = res
      } else {
        res.forEach((item : any) => {
          dataList.value.push(item)
        })
      }

    }).catch((e : any) => {
      console.log(e)
      uni.hideLoading()
    })
  }
  //模版点击事件
  const itemClick = (item : any) => {
    if (item.dataState == -1) {
      uni.showToast({
        title: '模版状态异常',
        icon: 'none'
      })
      return
    }
    console.log(item)
    uni.showLoading({
      title: ''
    })
    saveClModelTaskByModel({
      modelCode: item.modelCode,
      modelTaskName: item.modelName,
      dealerCode,//经销商编码
      dealerName,//经销商名称
      shopCode,
      shopName,
      scene: item.scene,
      scoreRule: item.scoreRule//记分规则1合格得分，2不合格扣分
    }).then((res : any) => {
      uni.hideLoading()
      if (res.sysRecode) {
        uni.showToast({
          title: '任务创建成功',
          icon: 'none'
        })
        uni.$emit('ceateTask', '')
        uni.navigateBack()
      }
    })
  }
  //创建任务
  const ceateTask = () => {
    uni.navigateTo({
      url: `/pagesMember/inspection/store_inspection?data=${JSON.stringify({
        name: currentStore.userinfoCompname,
        code: currentStore.userinfoCode
      })}`
    })
  }
  const onSelect = (item : any) => {

  }
  const isSelected = (item : any) => {

  }
</script>

<style lang="scss">
  page {
    background: linear-gradient(#ffffff, #F6F8FA);
    padding-top: 20rpx;
  }

  .item {
    background: rgba(179, 220, 246, 0.2);
    border-radius: 16rpx;
    padding: 24rpx;
    margin-left: 30rpx;
    margin-right: 30rpx;
    margin-top: 20rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

  }

  .left_container {
    display: flex;
    align-items: center;
    flex-direction: row;
  }

  .right_img {
    width: 36rpx;
    height: 36rpx
  }

  .modal_img {
    width: 44rpx;
    height: 44rpx;
  }

  .modal_name {
    height: 84rpx;
    line-height: 84rpx;
    margin-left: 15rpx;
    font-size: 30rpx;

  }

  .button_normal {
    width: 85%;
    color: #54B9CC;
    font-size: 32rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    border: 2rpx solid #54B9CC;
    margin-bottom: 30rpx;
  }

  .region-content {
    background-color: #fff;
    border-radius: 20rpx 20rpx 0 0;
    padding: 30rpx;
  }

  .region-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    margin-bottom: 20rpx;
    font-size: 32rpx;
  }

  .region-task-title {
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    flex-grow: 1;
    font-size: 30rpx;
    font-weight: bold;
  }

  .region-title {
    flex-grow: 1;
    font-weight: bold;
    text-align: center;
  }

  .options {
    height: 600rpx;
    padding: 20rpx 0;

    .option-item {
      padding: 25rpx 30rpx;
      font-size: 28rpx;
      display: flex;
      flex-direction: row;
      background: #FFFFFF;
      justify-content: space-around;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      border: 2rpx solid #eee;

      .option-text {
        flex-grow: 1;
      }

      &.active {
        color: #2979ff;
      }
    }
  }
</style>
